<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="baidu-site-verification" content="AcDQ8MIdI9" />
  
  <title itemprop="name">使用Github+jsDelivr+picgo搭建自己的免费cdn与图床 | 我们の小栈</title>
  
    <link rel="shortcut icon" href="/img/favicon.ico">
  
  <meta http-equiv="x-dns-prefetch-control" content="on">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+SerifMerriweather|Merriweather+Sans|Source+Code+Pro|Ubuntu:400,700|Noto+Serif+SC" media="all">
  <link rel="dns-prefetch" href="//cdn.jsdelivr.net">
  <link rel="stylesheet" id="saukra_css-css" href="/css/style.css" type="text/css" media="all">
  <link rel="stylesheet" href="/css/lib.min.css" media="all">
  <link rel="stylesheet" href="/css/font.css" media="all">
  <link rel="stylesheet" href="/css/insight.css" media="all">
  <link rel="stylesheet" href="/css/jquery.fancybox.min.css" media="all">
  <link rel="stylesheet" href="/css/zoom.css" media="all">
  <link rel="stylesheet" type="text/css" href="/css/sharejs.css">
  <link rel="stylesheet" href="/css/tags.css" media="all">
  <!--自定义看板娘-->
  <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
  <script src="/live2d-widget/autoload.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>

  <!--   <link rel="stylesheet" id="saukra_css-css" href="https://2heng.xin/wp-content/cache/autoptimize/css/autoptimize_ad42a61f4c7d4bdd9f91afcff6b5dda5.css
" type="text/css" media="all"> -->
  <script>
  /*Initial Variables*/
  var mashiro_option = new Object();
  var mashiro_global = new Object();
  mashiro_option.NProgressON = true;
  /* 
   * 邮箱信息之类的东西可以填在这里，这些js变量基本都作用于sakura-app.js
   * 这样的设置仅是为了方便在基于PHP开发的主题中设置js变量，既然移植到了Node上，我想或许可以精简这一逻辑吧
   */
  mashiro_option.email_domain = "";
  mashiro_option.email_name = "";
  mashiro_option.cookie_version_control = "";
  mashiro_option.qzone_autocomplete = false;
  mashiro_option.site_name = "hz❤nxy我们の小栈";
  mashiro_option.author_name = "我们の小栈";
  mashiro_option.site_url = "https://huangdaxian123.gitee.io";
  mashiro_option.v_appId = "xmdqoGsIvX5egT8D4oBvsGWz-gzGzoHsz";
  mashiro_option.v_appKey = "n3KLfzDG1j5XCUVgQPdyCbfp";
  mashiro_option.mathjax = "1";
  mashiro_option.qq_api_url = "https://api.mashiro.top/qqinfo/"; 
  mashiro_option.qq_avatar_api_url = "https://api.mashiro.top/qqinfo/";

  // mashiro_option.jsdelivr_css_src = "https://cdn.jsdelivr.net/gh/moezx/cdn@3.4.5/css/lib.min.css";
  // mashiro_option.float_player_on = true;

  /*End of Initial Variables*/
  </script>
  <script type="text/javascript">
  var bg = "https://cdn.jsdelivr.net/gh/xiaomengxin123/cdn@1.0/images/cover/(1).webp,https://cdn.jsdelivr.net/gh/xiaomengxin123/cdn@1.0/images/cover/(2).webp,https://cdn.jsdelivr.net/gh/xiaomengxin123/cdn@1.0/images/cover/(3).webp,https://cdn.jsdelivr.net/gh/xiaomengxin123/cdn@1.0/images/cover/(4).webp,https://cdn.jsdelivr.net/gh/xiaomengxin123/cdn@1.0/images/cover/(5).webp,https://cdn.jsdelivr.net/gh/xiaomengxin123/cdn@1.0/images/cover/(6).webp".split(",");
  var bgindex = Math.floor(Math.random()*bg.length);
  if (!!window.ActiveXObject || "ActiveXObject" in window) { //is IE?
    alert('朋友，IE浏览器未适配哦~');
  }
  </script>
  <style type="text/css">
  .hljs-ln{border-collapse:collapse}.hljs-ln td{padding:0}.hljs-ln-n:before{content:attr(data-line-number)}
  </style>
  <style type="text/css">.site-top .lower nav{display:block !important;}.author-profile i,.post-like a,.post-share .show-share,.sub-text,.we-info a,span.sitename,.post-more i:hover,#pagination a:hover,.post-content a:hover,.float-content i:hover{color:#FE9600}.feature i,.download,.navigator i:hover,.links ul li:before,.ar-time i,span.ar-circle,.object,.comment .comment-reply-link,.siren-checkbox-radio:checked + .siren-checkbox-radioInput:after{background:#FE9600}::-webkit-scrollbar-thumb{background:#FE9600}.download,.navigator i:hover,.link-title,.links ul li:hover,#pagination a:hover,.comment-respond input[type='submit']:hover{border-color:#FE9600}.entry-content a:hover,.site-info a:hover,.comment h4 a,#comments-navi a.prev,#comments-navi a.next,.comment h4 a:hover,.site-top ul li a:hover,.entry-title a:hover,#archives-temp h3,span.page-numbers.current,.sorry li a:hover,.site-title a:hover,i.iconfont.js-toggle-search.iconsearch:hover,.comment-respond input[type='submit']:hover{color:#FE9600}.comments .comments-main{display:block !important;}.comments .comments-hidden{display:none !important;}background-position:center center;background-attachment:inherit;}
  </style>
<meta name="generator" content="Hexo 4.2.0"></head>

<body class="page-template page-template-user page-template-page-analytics page-template-userpage-analytics-php page page-id-1297 chinese-font serif isWebKit">
  <div class="scrollbar" id="bar">
  </div>
  <a href="#" class="cd-top faa-float animated"></a>
  <section id="main-container">
    <div class="headertop ">
  <div id="banner_wave_1"></div>
  <div id="banner_wave_2"></div>
  <figure id="centerbg" class="centerbg">
    <div class="focusinfo no-select">
      <div class="header-tou">
        <a href="https://huangdaxian123.gitee.io">
          <img src="https://cdn.jsdelivr.net/gh/xiaomengxin123/cdn@1.3/img/custom/avatar.jpg">
        </a>
      </div>
      <div class="header-info">
        <p>南风过境，春风十里不如你！</p>
        <div class="top-social_v2">
          <li id="bg-pre">
            <img class="flipx" src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/next-b.svg">
          </li>
          
            
              
                <li>
                  <a href="https://github.com/xiaomengxin123" target="_blank" class="social-github" title="github">
                    <img src="https://cdn.jsdelivr.net/gh/xiaomengxin123/cdn@1.3/img/social/github.png">
                  </a>
                </li>
              
            
              
                <li>
                  <a href="https://music.163.com/" target="_blank" class="social-github" title="wangyiyun">
                    <img src="https://cdn.jsdelivr.net/gh/xiaomengxin123/cdn@1.3/img/social/wangyiyun.png">
                  </a>
                </li>
              
            
              
                <li>
                  <a href="https://www.zhihu.com/" target="_blank" class="social-github" title="zhihu">
                    <img src="https://cdn.jsdelivr.net/gh/xiaomengxin123/cdn@1.3/img/social/zhihu.png">
                  </a>
                </li>
              
            
              
                <li>
                  <a href="/#" target="_blank" class="social-github" title="qq">
                    <img src="https://cdn.jsdelivr.net/gh/xiaomengxin123/cdn@1.3/img/social/qq.png">
                  </a>
                </li>
              
            
              
                <li class="wechat">
                  <a href="/#">
                    <img src="https://cdn.jsdelivr.net/gh/xiaomengxin123/cdn@1.3/img/social/wechat.png">
                  </a>
                  <div class="wechatInner">
                    <img src="https://cdn.jsdelivr.net/gh/xiaomengxin123/cdn@1.3/img/custom/wechat.jpg">
                  </div>
                </li>
              
            
          
          <li id="bg-next">
            <img src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/next-b.svg">
          </li>
        </div>
      </div>
    </div>
  </figure>
  <div id="video-container" style="">
    <video style="object-fit: fill" id="bgvideo" class="video" video-name="" src="" width="auto" preload="auto">
    </video>
    <div id="video-btn" class="loadvideo videolive">
    </div>
    <div id="video-add">
    </div>
    <div class="video-stu">
    </div>
  </div>
  <div class="headertop-down faa-float animated" onclick="headertop_down()">
    <span>
      <i class="fa fa-chevron-down" aria-hidden="true">
      </i>
    </span>
  </div>
</div>
    <div id="page" class="site wrapper">
      <header class="site-header no-select gizle sabit" role="banner">
  <div class="site-top">
    <div class="site-branding">
      <span class="site-title">
        <span class="logolink moe-mashiro">
          <a href="/">
            <span class="sakurasono">hz❤nxy</span>
            <span class="shironeko">我们の小栈</span>
          </a>
        </span>
      </span>
    </div>
    <div class="searchbox search-form-submit">
      <i class="iconfont js-toggle-search iconsearch icon-search">
      </i>
    </div>
    <div id="show-nav" class="showNav mobile-fit">
      <div class="line line1">
      </div>
      <div class="line line2">
      </div>
      <div class="line line3">
      </div>
    </div>
    <div class="lower-cantiner">
      <div class="lower">
        <nav class="mobile-fit-control hide">
          <ul id="menu-new" class="menu">
            
              <li>
                <a href="/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-fort-awesome faa-shake" aria-hidden="true"></i>
                    首页
                  </span>
                </a>
                
              </li>
            
              <li>
                <a href="/archives">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-archive faa-shake" aria-hidden="true"></i>
                    归档
                  </span>
                </a>
                
                  <ul class="sub-menu">
                    
                      <li>
                        <a href="/tags">
                          <i class="fa fa-tags" aria-hidden="true"></i>
                          标签
                        </a>
                      </li>
                    
                      <li>
                        <a href="/categories/%E6%8A%80%E6%9C%AF/">
                          <i class="fa fa-code" aria-hidden="true"></i>
                          技术
                        </a>
                      </li>
                    
                      <li>
                        <a href="/categories/%E7%94%9F%E6%B4%BB/">
                          <i class="fa fa-file-text-o" aria-hidden="true"></i>
                          生活
                        </a>
                      </li>
                    
                  </ul>
                
              </li>
            
              <li>
                <a href="javascript:;">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-list-ul faa-vertical" aria-hidden="true"></i>
                    清单
                  </span>
                </a>
                
                  <ul class="sub-menu">
                    
                      <li>
                        <a href="/tags/%E6%82%A6%E8%AF%BB/">
                          <i class="fa fa-th-list faa-bounce" aria-hidden="true"></i>
                          书单
                        </a>
                      </li>
                    
                      <li>
                        <a href="/bangumi/">
                          <i class="fa fa-film faa-vertical" aria-hidden="true"></i>
                          番组
                        </a>
                      </li>
                    
                      <li>
                        <a href="/music/">
                          <i class="fa fa-headphones" aria-hidden="true"></i>
                          歌单
                        </a>
                      </li>
                    
                      <li>
                        <a href="/tags/%E7%9B%B8%E5%86%8C/">
                          <i class="fa fa-photo" aria-hidden="true"></i>
                          相册
                        </a>
                      </li>
                    
                      <li>
                        <a href="/shuoshuo/">
                          <i class="fa fa-commenting-o fa-commenting" aria-hidden="true"></i>
                          说说
                        </a>
                      </li>
                    
                  </ul>
                
              </li>
            
              <li>
                <a href="/comment/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-pencil-square-o faa-tada" aria-hidden="true"></i>
                    留言板
                  </span>
                </a>
                
              </li>
            
              <li>
                <a href="/links/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-link faa-shake" aria-hidden="true"></i>
                    友人帐
                  </span>
                </a>
                
              </li>
            
              <li>
                <a href="/donate/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-heart faa-pulse" aria-hidden="true"></i>
                    赞赏
                  </span>
                </a>
                
              </li>
            
              <li>
                <a href="/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-leaf faa-wrench" aria-hidden="true"></i>
                    关于
                  </span>
                </a>
                
                  <ul class="sub-menu">
                    
                      <li>
                        <a href="/about/">
                          <i class="fa fa-meetup" aria-hidden="true"></i>
                          我？
                        </a>
                      </li>
                    
                      <li>
                        <a href="/theme-sakura/">
                          <i class="fa iconfont icon-sakura" aria-hidden="true"></i>
                          主题
                        </a>
                      </li>
                    
                      <li>
                        <a href="/lab/">
                          <i class="fa fa-cogs" aria-hidden="true"></i>
                          Lab
                        </a>
                      </li>
                    
                  </ul>
                
              </li>
            
              <li>
                <a href="/client/">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-android faa-vertical" aria-hidden="true"></i>
                    客户端
                  </span>
                </a>
                
              </li>
            
              <li>
                <a href="/atom.xml">
                  <span class="faa-parent animated-hover">
                    <i class="fa  fa-rss faa-pulse" aria-hidden="true"></i>
                    RSS
                  </span>
                </a>
                
              </li>
            
          </ul>
        </nav>
      </div>
    </div>
  </div>
</header>

      <link rel="stylesheet" type="text/css" href="/css/sharejs.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css">
<div class="pattern-center-blank"></div>

  <div class="pattern-center single-center">
    <!-- 有配图默认渲染第一张 -->
    <div class="pattern-attachment-img lazyload" style="background-image: url(https://gitee.com/HuangDaXian123/blogimage/raw/master/img/65982396c3efa881e507d6182467f484.jpg);" src="https://cdn.jsdelivr.net/gh/xiaomengxin123/cdn@1.4/img/loader/orange.progress-bar-stripe-loader.svg" data-src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/65982396c3efa881e507d6182467f484.jpg">
    </div>
    <header class="pattern-header single-header">
      <h1 class="entry-title">
      使用Github+jsDelivr+picgo搭建自己的免费cdn与图床</h1>
      <p class="entry-census">
        <span>
          <a href="https://huangdaxian123.gitee.io">
            <img src="https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/custom/cungudafa.jpg">
          </a>
        </span>
        <span>
          <a href="https://huangdaxian123.gitee.io">PeterPark</a>
        </span>
        <span class="bull">
        ·</span>
        2020-3-19<span class="bull">
        ·</span>
      <span id="busuanzi_value_page_pv"></span>次阅读</p>
      	<!-- 开始添加字数统计-->
	      
	        	<div style="margin-top:10px;">
	    <span class="post-time">
	      <span class="post-meta-item-icon">
	        <i class="fa fa-keyboard-o"></i>
	        <span class="post-meta-item-text">  字数统计: </span>
	        <!-- 安装插件npm install hexo-wordcount --save -->
	        <span class="post-count">2.1k字</span>
	      </span>
	    </span>
	
	    <span class="post-time">
	      &nbsp; | &nbsp;
	      <span class="post-meta-item-icon">
	        <i class="fa fa-hourglass-half"></i>
	        <span class="post-meta-item-text">  阅读时长: </span>
	        <span class="post-count">7分</span>
	      </span>
	    </span>
	</div>

	      
      <!-- 添加完成 -->

    </header>
  </div>

<div id="content" class="site-content">
  <div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
      <article id="post-1" class="post-1 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized">
        <div class="toc"></div>
        <!--<div class="toc-entry-content"><!-- 套嵌目录使用（主要为了支援评论）-->
        
        <div class="entry-content">
          <h2 id="一、cdn简介"><a href="#一、cdn简介" class="headerlink" title="一、cdn简介"></a>一、cdn简介</h2><p>CDN的全称是<strong>Content Delivery Network</strong>，即<strong>内容分发网络</strong>。CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有<strong>内容存储</strong>和<strong>分发技术</strong>。</p>
<p>放在Github的资源在国内加载速度比较慢，因此需要使用CDN加速来优化网站打开速度，jsDelivr + Github便是免费且好用的CDN，非常适合博客网站使用。</p>
<h2 id="二、内容存储"><a href="#二、内容存储" class="headerlink" title="二、内容存储"></a>二、内容存储</h2><h3 id="1-新建Github-cdn仓库"><a href="#1-新建Github-cdn仓库" class="headerlink" title="1. 新建Github\cdn仓库"></a>1. 新建Github\cdn仓库</h3><p>命名为cdn，公开访问权限<br>(为了演示真实，以下所有图片大部分为引用，见谅见谅)<br><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/5093e528651785e864f49f5fb782a25f_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1bmd1ZGFmYQ==,size_16,color_FFFFFF,t_70.png" alt=""></p>
<p>获取仓库地址<br><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/5af5003cf2f416f6ac92f996962e2795_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1bmd1ZGFmYQ==,size_16,color_FFFFFF,t_70.png" alt="">  </p>
<h3 id="2-克隆仓库到本地"><a href="#2-克隆仓库到本地" class="headerlink" title="2. 克隆仓库到本地"></a>2. 克隆仓库到本地</h3><p>进入gitbash,使用cd指令进入合适的盘，例如：进入E盘,</p>
<blockquote>
<p>cd e:  </p>
</blockquote>
<p>然后使用git clone命令克隆仓库到本地</p>
<pre><code class="git">$ git clone https://github.com/cungudafa/cdn.git</code></pre>
<blockquote>
<p>第一次应该是空目录，以后有素材文件，这一步就比较关键（以免替覆盖掉之前的素材）</p>
</blockquote>
<h3 id="3-上传资源"><a href="#3-上传资源" class="headerlink" title="3. 上传资源"></a>3. 上传资源</h3><p>1、比如：现有img和js素材，复制到cdn目录下（支持20M以内的图片、视频、js、css等）<br><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/f0a892449de468349b4786e28ed2248f_20200212112709297.png" alt=""><br>2、在本地git仓库目录下右键 Git Bash Here，执行以下命令：  </p>
<pre><code class="git">$ git status                    //查看状态
$ git add .                     //添加所有文件到暂存区
$ git commit -m &#39;第一次提交&#39;      //把文件提交到仓库
$ git push                      //推送至远程仓库</code></pre>
<p>也可以用Git Gui上传，上传成功后在浏览器可查看<a href="https://github.com/cungudafa/cdn" target="_blank" rel="noopener">https://github.com/cungudafa/cdn</a><br><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/bec30e132138151324636bbfb0826f0a_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1bmd1ZGFmYQ==,size_16,color_FFFFFF,t_70.png" alt="">  </p>
<h3 id="4-发布资源"><a href="#4-发布资源" class="headerlink" title="4. 发布资源"></a>4. 发布资源</h3><p>1、点击release自定义发布的版本号<br><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/92931ae98848d9a59c90656605b1c322_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1bmd1ZGFmYQ==,size_16,color_FFFFFF,t_70.png" alt="">  </p>
<p>2、自定义版本号<br><img src="https://cdn.jsdelivr.net/gh/xiaomengxin123/pic/img/0660ffa6e43cccaebfb198ab0753fee2_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1bmd1ZGFmYQ==,size_16,color_FFFFFF,t_70.png" alt=""><br>我上传了两次图片，我这里发布了两个版本：（1.6和2.0版本）<br><img src="https://cdn.jsdelivr.net/gh/xiaomengxin123/pic/img/eeabe73f3f43d0c5faf3b885bd90f3dc_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1bmd1ZGFmYQ==,size_16,color_FFFFFF,t_70.png" alt=""></p>
<h2 id="三、jsDelivr引用"><a href="#三、jsDelivr引用" class="headerlink" title="三、jsDelivr引用"></a>三、jsDelivr引用</h2><p>1、原理：将github上的资源转为快速访问网址</p>
<p><a href="https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径" target="_blank" rel="noopener">https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径</a><br>例如：<br><a href="https://cdn.jsdelivr.net/gh/cungudafa/cdn@1.6/img/custom/cungudafa.jpg" target="_blank" rel="noopener">https://cdn.jsdelivr.net/gh/cungudafa/cdn@1.6/img/custom/cungudafa.jpg</a><br><a href="https://cdn.jsdelivr.net/gh/cungudafa/cdn@2.0/img/custom/cungudafa.jpg" target="_blank" rel="noopener">https://cdn.jsdelivr.net/gh/cungudafa/cdn@2.0/img/custom/cungudafa.jpg</a><br>第一次1.6版本没有发布图片，在2.0版本有发布图片。<br><img src="https://cdn.jsdelivr.net/gh/xiaomengxin123/pic/img/f5e9a901a338ce8bb976c65d2ac0fb28_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1bmd1ZGFmYQ==,size_16,color_FFFFFF,t_70.png" alt=""></p>
<p>2、版本号不是必需的，是为了区分新旧资源，如果不使用版本号，将会直接引用最新资源</p>
<p>//完全省略该版本以获取最新版本<br><a href="https://cdn.jsdelivr.net/gh/user/repo/file" target="_blank" rel="noopener">https://cdn.jsdelivr.net/gh/user/repo/file</a><br><a href="https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/custom/cungudafa.jpg" target="_blank" rel="noopener">https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/custom/cungudafa.jpg</a></p>
<p>3、目录</p>
<p><font color=#FF0000>  // 在末尾添加 / 以获取资源目录列表<br><a href="https://cdn.jsdelivr.net/gh/user/repo@version/file/" target="_blank" rel="noopener">https://cdn.jsdelivr.net/gh/user/repo@version/file/</a> </font><br>比如：<br><a href="https://cdn.jsdelivr.net/gh/cungudafa/cdn@2.0.1/img/custom/" target="_blank" rel="noopener">https://cdn.jsdelivr.net/gh/cungudafa/cdn@2.0.1/img/custom/</a><br><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/b4dc83323d76033ff94fc720d9c1460e_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1bmd1ZGFmYQ==,size_16,color_FFFFFF,t_70.png" alt=""></p>
<h2 id="四、GitHub-Pic-jsdelivr搭建图床"><a href="#四、GitHub-Pic-jsdelivr搭建图床" class="headerlink" title="四、GitHub+Pic+jsdelivr搭建图床"></a>四、GitHub+Pic+jsdelivr搭建图床</h2><h3 id="1、获取token"><a href="#1、获取token" class="headerlink" title="1、获取token"></a>1、获取token</h3><blockquote>
<p>github云端仓库位置： 延续上一次cdn的仓库失败。（建议新建一个仓库，发布过release版本号的仓库会使用异常） </p>
</blockquote>
<p>1、进入设置Setting<br><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/20200319090050.png" alt=""><br>2、选择开发者设置<br><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/20200319085757.png" alt=""><br>3、选择个人数据帧Personal access tokens，生成新的数据帧 <strong>Generate new token</strong><br><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/a9b82fe7d244b76fd8bb68cecc6b74cf_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1bmd1ZGFmYQ==,size_16,color_FFFFFF,t_70.png" alt=""><br>4、命名为picgo（图床），赋予仓库权限<br><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/4910fe2a198af0eec6c89c867822f809_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1bmd1ZGFmYQ==,size_16,color_FFFFFF,t_70.png" alt=""><br>最后点击Generate token即可看到显示的token页面，它只会显示一次，关闭页面后再打开这个页面就不会显示了。 复制token值粘贴到文本文档中，先保存下来，后面配置PicGo要用到。<br><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/0a858184690f176dafb881c55e551f49_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1bmd1ZGFmYQ==,size_16,color_FFFFFF,t_70.png" alt=""></p>
<h3 id="2、本地安装图片上传工具"><a href="#2、本地安装图片上传工具" class="headerlink" title="2、本地安装图片上传工具"></a>2、本地安装图片上传工具</h3><p>&ensp;1、首先下载PicGo，图片上传工具PicGo下载地址:<a href="https://github.com/Molunerfinn/PicGo/releases" target="_blank" rel="noopener">https://github.com/Molunerfinn/PicGo/releases</a>  </p>
<blockquote>
<p>如果下载速度非常慢的话，备用地址：<a href="https://pan.baidu.com/s/1bWkImn3pBKZpx9lnMhkRRA?spm=a2c4e.10696291.0.0.3c2f19a4dJCdHQ" target="_blank" rel="noopener">传送门</a>密钥：n5wu  </p>
</blockquote>
<h3 id="3、安装配置PicGo"><a href="#3、安装配置PicGo" class="headerlink" title="3、安装配置PicGo"></a>3、安装配置PicGo</h3><p><img src="https://cdn.jsdelivr.net/gh/xiaomengxin123/pic/img/20200319092917.png" alt=""></p>
<ol>
<li>设定仓库名：这个是刚刚第一步所新建仓库的名称，我的为cdn，此处填写格式username/repo。</li>
<li>设定分支名：master，采用默认分支即可设定Token：此处填写上一步得到的Token，添加到输入框即可。</li>
<li>指定存储路径：自定义，例：images/，相当于在刚刚新建的仓库下新建了一个文件夹。</li>
<li>设定自定义域名：cdn加速格式：<a href="https://cdn.jsdelivr.net/gh/username/repo" target="_blank" rel="noopener">https://cdn.jsdelivr.net/gh/username/repo</a>，username为GitHub用户名，repo为新建的仓库，用于存储图片</li>
<li>设置快捷键ctrl+shit+C: 在qq截屏ctrl+alt+a后，再ctrl+shit+C可以快速上传</li>
</ol>
<h3 id="4、上传方法"><a href="#4、上传方法" class="headerlink" title="4、上传方法"></a>4、上传方法</h3><ol>
<li>快捷键上传</li>
<li>拖拽上传</li>
</ol>
<p><img src="https://cdn.jsdelivr.net/gh/xiaomengxin123/pic/img/99f1eac808b3b78f69efb269f7c9f0ea_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1bmd1ZGFmYQ==,size_16,color_FFFFFF,t_70.png" alt=""></p>
<p><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/7dd57fc7745897bc83aee4e9ed0b1760_watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N1bmd1ZGFmYQ==,size_16,color_FFFFFF,t_70.png" alt=""></p>
<blockquote>
<p>由于GitHub经常出现上传失败的现象（明明配置正确）,但是仍然上传失败，怎么办？Gitee+Picgo,缺点就是Pic中的相册不能预览，vscode中markdown也不能预览，但是hexo部署后显示正常。而且虽然说写博客可以转载别人的图片，但是一般正规博客比如csdn，博客园等会有记录，本地预览可以结果放在网上没过多久就挂了，所以使用图床搭建自己的markdown链接是很有必要的  </p>
</blockquote>
<h2 id="五、Gitee-Picgo搭建图床"><a href="#五、Gitee-Picgo搭建图床" class="headerlink" title="五、Gitee+Picgo搭建图床"></a>五、Gitee+Picgo搭建图床</h2><h3 id="1-打开Picgo选择最底下的插件设置，搜索gitee"><a href="#1-打开Picgo选择最底下的插件设置，搜索gitee" class="headerlink" title="1.打开Picgo选择最底下的插件设置，搜索gitee"></a>1.打开Picgo选择最底下的插件设置，搜索gitee</h3><p><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/20200319094130.png" alt=""><br><strong>点击右边的gitee-uploader 1.1.2开始安装</strong> </p>
<blockquote>
<p>这里注意一下，必须要先安装node.js才能安装插件，没装的自己装一下，然后重启就行,如果node.js不会配置，可以参考我之前的博客 《hexo制作精美博客一》，里面详细记载了从下载到安装</p>
</blockquote>
<p>这个地方有两个插件，我试了一遍，两个都能用，大家看心情选择，先说一下右边这个gitee-uploader 1.1.2，用不了的同学就选左边那个，我都会讲一遍配置</p>
<h3 id="2-建立gitee（码云）图床库"><a href="#2-建立gitee（码云）图床库" class="headerlink" title="2. 建立gitee（码云）图床库"></a>2. 建立gitee（码云）图床库</h3><p><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/20200319094739.png" alt=""><br>新建仓库的要点如下：</p>
<p><strong>&ensp;1.输入一个仓库名称<br>&ensp;2.其次将仓库设为公开<br>&ensp;3.勾选使用Readme文件初始化这个仓库</strong>    </p>
<p><strong>这个选项勾上，这样码云会自动给你的仓库建立master分支</strong>，这点很重要!!! 我因为这点折腾了很久，因为使用github做图床picgo好像会自动帮你生成master分支，而picgo里的gitee插件不会帮你自动生成分支。<br><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/20200319095012.png" alt=""></p>
<h3 id="3-配置PicGo"><a href="#3-配置PicGo" class="headerlink" title="3. 配置PicGo"></a>3. 配置PicGo</h3><p>安装了gitee-uploader 1.1.2插件之后，我们开始配置插件</p>
<p><strong>配置插件的要点如下：</strong><br><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/20200319095641.png" alt=""></p>
<ul>
<li><p>repo：用户名/仓库名称，比如我自己的仓库leonG7/blogImage，也可以直接复制仓库的url<br><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/20200319095832.png" alt=""></p>
</li>
<li><p>branch：分支，这里写上master</p>
</li>
<li><p>token：填入码云的私人令牌</p>
</li>
<li><p>path：路径，一般写上img</p>
</li>
<li><p>customPath：提交消息，这一项和下一项customURL都不用填。在提交到码云后，会显示提交消息，插件默认提交的是 Upload 图片名 <font color="red">by picGo - 时间</font></p>
</li>
</ul>
<p><strong>这个token怎么获取，下面登录进自己的码云</strong> </p>
<ol>
<li><p>点击头像，进入设置<br><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/20200319100244.png" alt=""></p>
</li>
<li><p>找到右边安全设置里面的私人令牌<br><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/20200319100341.png" alt="">  </p>
</li>
<li><p>点击生成新令牌，把projects这一项勾上，其他的不用勾，然后提交<br><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/20200319100812.png" alt="">  </p>
</li>
</ol>
<p>这里需要验证一下密码，验证密码之后会出来一串数字，这一串数字就是你的token，将这串数字复制到刚才的配置里面去。<br><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/20200319101048.png" alt="">  </p>
<blockquote>
<p>注意：这个令牌只会明文显示一次，建议在配置插件的时候再来生成令牌，直接复制进去，搞丢了又要重新生成一个。</p>
</blockquote>
<p><strong>现在保存你刚才的配置，然后将它设置为默认图床，大功告成。</strong><br>还有一个插件gitee 1.2.2-beta，功能差不多，刚才那个能用的话就不需要用这个，配置的内容有点差别，简单说一下：<br><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/20200319101232.png" alt="">  </p>
<ul>
<li><p>url：图床网站，这里写码云的主页 <a href="https://gitee.com" target="_blank" rel="noopener">https://gitee.com</a></p>
</li>
<li><p>owner：所有者，写上你的码云账号名，如果你不知道你的账号名，进入你刚才的仓库，浏览器url里面有<br><img src="https://gitee.com/HuangDaXian123/blogimage/raw/master/img/20200319101653.png" alt="">  </p>
</li>
<li><p>repo：仓库名称，只要写上仓库名称就行，比如我自己的仓库blogImage </p>
</li>
<li><p>path：写上路径，一般是img，这几个项都不用加“ / “符号</p>
</li>
<li><p>token：刚才你获取的个人令牌，两个插件是通用的，如果你用了另一个再来用这个，它会自动读取另一个插件的部分配置，不用重新申请</p>
</li>
<li><p>message：不用填</p>
</li>
</ul>
<h3 id="4-测试"><a href="#4-测试" class="headerlink" title="4. 测试"></a>4. 测试</h3><p>随便选一张图片上传（picgo也支持剪贴板上传，截图工具推荐win10的Snipaste神器！），试试看！</p>

        </div>
        <!-- .entry-content -->
        <div class="single-reward">
          <div class="reward-open">赏
            <div class="reward-main">
              <ul class="reward-row">
                <li class="alipay-code"><img src="https://cdn.jsdelivr.net/gh/xiaomengxin123/cdn@1.3/img/donate/AliPayQR.jpg"></li>
                <li class="wechat-code"><img src="https://cdn.jsdelivr.net/gh/xiaomengxin123/cdn@1.3/img/donate/WeChanQR.jpg"></li>
              </ul>
            </div>
          </div>
        </div>
        <div style="text-align:center; width: 100%" class="social-share share-mobile" data-disabled="diandian, tencent"></div>
        <footer class="post-footer">
          <div class="post-lincenses"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="nofollow"><i class="fa fa-creative-commons" aria-hidden="true"></i> 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a></div>
         
          <div class="post-tags">
            <div class="tag-cloud">
              <div class="tag-cloud-title">
              </div>
              <div class="tag-cloud-tags">
              <a href="/tags/hexo/" style="font-size: 20px; color: #95e1d3">hexo</a> <a href="/tags/%E6%83%85%E4%B9%A6/" style="font-size: 10px; color: #f38181">情书</a> <a href="/tags/%E9%9A%8F%E7%AC%94/" style="font-size: 10px; color: #f38181">随笔</a>
              </div>
            </div>

          </div>
          <div class="post-share">
            <div class="social-share sharehidden share-component"></div>
            <i class="iconfont show-share icon-forward"></i>
          </div>
        </footer><!-- .entry-footer -->
      </article>
      <!-- #post-## -->
      <div class="toc" style="background: none;"></div>
      <section class="post-squares nextprev">
        
          
            <div class="post-nepre half previous">
          
            <a href="/posts/undefined.html" rel="prev">
              <div class="background">
                <img class="lazyload" src="https://cdn.jsdelivr.net/gh/xiaomengxin123/cdn@1.4/img/loader/orange.progress-bar-stripe-loader.svg" data-src="http://pic1.win4000.com/wallpaper/2018-04-17/5ad5b643a8696.jpg" style="width: 100%; height: 100%; object-fit: cover; pointer-events: none;" onerror="imgError(this,3)" src="http://pic1.win4000.com/wallpaper/2018-04-17/5ad5b643a8696.jpg">
              </div>
              <span class="label">
              Previous Post</span>
              <div class="info">
                <h3>
                桃花开了，我的心也为你盛放</h3>
                <hr>
              </div>
            </a>
          </div>
        
        
          
            <div class="post-nepre half next">
          
            <a href="/posts/6248.html" rel="next">
              <div class="background">
                <img class="lazyload" src="https://cdn.jsdelivr.net/gh/xiaomengxin123/cdn@1.4/img/loader/orange.progress-bar-stripe-loader.svg" data-src="http://i0.hdslb.com/bfs/article/06cb03c915ebd37cc3ff9d9f3215eed1299035cd.jpg" style="width: 100%; height: 100%; object-fit: cover; pointer-events: none;" onerror="imgError(this,3)" src="http://i0.hdslb.com/bfs/article/06cb03c915ebd37cc3ff9d9f3215eed1299035cd.jpg">
              </div>
              <span class="label">
              Next Post</span>
              <div class="info">
                <h3>
                hexo制作精美个人博客（一）——准备工作</h3>
                <hr>
              </div>
            </a>
          </div>
        
      </section>
      
<div id="vcomments"></div>
<script src="https://cdn.jsdelivr.net/gh/cungudafa/cdn/js/Valine.min.js"></script>
<script src="../../source/js/valine.min.js.js"></script>
<script>
  window.onload = function(){
      var valine = new Valine();
      valine.init({
        el: '#vcomments',
        appId: "xmdqoGsIvX5egT8D4oBvsGWz-gzGzoHsz",
        appKey: "n3KLfzDG1j5XCUVgQPdyCbfp",
        path: window.location.pathname,
        placeholder: "你是我一生只会遇见一次的惊喜 ..."
      })
  }
</script>


      <section class="author-profile">
        <div class="info" itemprop="author" itemscope="" itemtype="https://schema.org/Person">
          <a href="https://huangdaxian123.gitee.io" class="profile gravatar"><img src="https://cdn.jsdelivr.net/gh/cungudafa/cdn/img/custom/cungudafa.jpg" itemprop="image" alt="PeterPark" height="70" width="70"></a>
          <div class="meta">
            <span class="title">Author</span>
            <h3 itemprop="name">
            <a href="https://huangdaxian123.gitee.io" itemprop="url" rel="author">PeterPark</a>
            </h3>
          </div>
        </div>
        <hr>
        <p><i class="iconfont icon-write"></i>一个简约的编程开发者！</p>
      </section>
    </main><!-- #main -->
  </div><!-- #primary -->
</div>



    </div>    
    <div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="Type something..."/>
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: 'Posts',
            // PAGES: 'Pages',
            CATEGORIES: 'Categories',
            TAGS: 'Tags',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
    <!-- <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy By HuangDaXian and NingXuYi 2019-2020; 2020 HuangDaXian<br>
      powered_by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer> -->
<footer id="colophon" class="site-footer" role="contentinfo">
  
  <div class="site-info">
    <div class="footertext">
      <div class="img-preload">
        <img src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/wordpress-rotating-ball-o.svg">
        <img src="https://cdn.jsdelivr.net/gh/honjun/cdn@1.6/img/other/disqus-preloader.svg">
      </div>
      <p style="color: #666666;">Copyright &copy 2019-2020 我们の小栈 Designed by HunagDaXian</p>
    </div>
    <div class="footer-device">
    <p style="font-family: 'Ubuntu', sans-serif;">
          <!--底部图标-->
          <a href="https://www.aliyun.com/" target="_blan" alt="AliYun"rel="nofollow">
            <img src="https://yremp.live/wp-content/uploads/2019/07/aliyun.png" alt="aliyun" style="height: 1.7em; max-height: 1.8em;padding-bottom: 0px;">
          </a>   
          &nbsp;&nbsp;&nbsp;                     
          <a href="https://www.jsdelivr.com/" target="_blank" alt="Free CDN" rel="nofollow">
            <img src="https://www.yremp.live/images/2019/08/17/JsDelivr_Logo0bd9a.png" alt="jsDelivr" style="height: 2em; max-height: 2em;padding-bottom: 0px;">
            </a>
            &nbsp;&nbsp;&nbsp;       
           <a href="https://github.com/" target="_blank" alt="Github" rel="nofollow">
              <img src="https://yremp.live/wp-content/uploads/2019/07/Github.png" alt="github" style="height: 2.2em; max-height: 2.5em;padding-bottom: 0px;">
            </a>
            &nbsp;&nbsp;&nbsp;                                
            <a href="https://2heng.xin" target="_blank" alt="Mashiro" rel="nofollow">
              <img src="https://cdn.jsdelivr.net/gh/moezx/cdn@3.0.8/img/logo/mashiro-logo.png" alt="Mashiro" style="height: 2.5em; max-height: 2em;padding-bottom: 0px; margin-bottom:0.2em">
            </a>
      </p>
    </div>
 
    <span style="color: rgb(243, 9, 60);padding-left: 20px;">
      <i class="fa fa-clock-o" aria-hidden="true"></i>
      <span id="time" align="center">载入时间中...</span>
      <script>
        var now = new Date(); 
        function createtime() { 
          var grt= new Date("2019-12-25 13:14:00");//在此处修改你的建站时间
          now.setTime(now.getTime()+250); 
          days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days); 
          hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours); 
          if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum); 
          mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;} 
          seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum); 
          snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;} 
          document.getElementById("time").innerHTML = "我们已经相恋 "+ dnum +" 天 "+hnum + " 小时 " + mnum + " 分 " + snum + " 秒";      
       } 
       setInterval("createtime()",250);
      </script>
      <!--不蒜子网页计数器-->
      <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
      <span style="color:#ccc;padding-left: 20px;"><i class="fa fa-eye" aria-hidden="true"></i>访问量: <span id="busuanzi_value_site_pv"></span>次</span>
    </span>

  </div><!-- .site-info -->
  	<script>(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/e85ddeb9.js","daovoice")</script>

</footer>

<!--浏览器搞笑标题-->
	<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/hititle.js"></script>
	<!-- 🌸飘落 -->
	<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/sakura.js"></script>
	<!-- 雪花飘落 -->
	<!-- <script src="https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/js/snow1.js"></script> -->
	<!-- // 文字 -->
	<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/shehuizhuyi.js"></script>
	<!-- // 烟花 -->
	<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
	<script type="text/javascript" src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
	<script src="https://cdn.jsdelivr.net/gh/Yafine/cdn@2.5/source/js/fireworks.js"></script>
	<!-- // 星星跟随坠落 -->
	<script src="https://cdn.jsdelivr.net/gh/cungudafa/cdn@2.1.2/js/cursor.js"></script>
	<!-- // 爱心 -->
	<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/love.js"></script>
	<!-- // 连线 -->
	<!-- <script src="https://cdn.jsdelivr.net/gh/wallleap/cdn/js/canvas-nest.min.js"></script>
	<script type="text/javascript" src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script> -->
	<!-- 样式二（飘动的彩带） -->
	<script src="https://cdn.jsdelivr.net/gh/wallleap/cdn@latest/js/piao.js" type="text/javascript"></script>
	 <!--背景切换-->
	 <script src="//instant.page/3.0.0" type="module" defer integrity="sha384-OeDn4XE77tdHo8pGtE1apMPmAipjoxUQ++eeJa6EtJCfHlvijigWiJpD7VDPWXV1"></script>

<!-- <script src="/js/tocbot.js"></script> -->
<script type="text/javascript" src="/js/lib.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script type="text/javascript" src="/js/InsightSearch.js"></script>
<script type="text/javascript" src="/js/jquery.fancybox.min.js"></script>
<script type="text/javascript" src="/js/zoom.min.js"></script>
<script type="text/javascript" src="/js/sakura-app.js"></script>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine@1.3.4/dist/Valine.min.js'></script>
<script src="/js/botui.js"></script>
<!-- 不蒜子 网页计数器 -->
<script src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"></script> -->
<script type="text/javascript">
/* <![CDATA[ */
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
  var Poi = {"pjax":"1","movies":{"url": "https://cdn.jsdelivr.net/gh/honjun/hojun@1.2","name":"Unbroken.mp4","live":"close"},"windowheight":"fixed","codelamp":"close","ajaxurl":"","order":"asc","formpostion":"bottom"};
} else {
  var Poi = {"pjax":"1","movies":{"url": "https://cdn.jsdelivr.net/gh/honjun/hojun@1.2","name":"Unbroken.mp4","live":"open"},"windowheight":"auto","codelamp":"close","ajaxurl":"","order":"asc","formpostion":"bottom"};
}
/* ]]> */

</script>
<script>
$(document).ready(function() {
  if ($(".toc").length > 0 && document.body.clientWidth > 1200) {
    if ($(".pattern-center").length > 0) { //有图的情况
      tocbot.init({
          // Where to render the table of contents.
          tocSelector: '.toc', // 放置目录的容器
          // Where to grab the headings to build the table of contents.
          contentSelector: '.entry-content', // 正文内容所在
          // Which headings to grab inside of the contentSelector element.
          scrollSmooth: true,
          headingSelector: 'h1, h2, h3, h4, h5', // 需要索引的标题级别
          headingsOffset: -400,
          scrollSmoothOffset: -85
      });
    } else {
      tocbot.init({
          // Where to render the table of contents.
          tocSelector: '.toc', // 放置目录的容器
          // Where to grab the headings to build the table of contents.
          contentSelector: '.entry-content', // 正文内容所在
          // Which headings to grab inside of the contentSelector element.
          scrollSmooth: true,
          headingSelector: 'h1, h2, h3, h4, h5', // 需要索引的标题级别
          headingsOffset: -85,
          scrollSmoothOffset: -85
      });
    }
    var offsetTop = $('.toc').offset().top - 95;
    window.onscroll = function() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop >= offsetTop) {
        $('.toc').addClass('toc-fixed');
      } else {
        $('.toc').removeClass('toc-fixed');
      }
    }
  }
});
</script>
  
  <script>(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/f6b2a0b1.js","daovoice")
    daovoice('init', {
      app_id: "e85ddeb9"
    });
    daovoice('update');
  </script>
 

    <div class="openNav no-select" style="height: 50px;">
      <div class="iconflat no-select" style="width: 50px; height: 50px;">
        <div class="icon"></div>
      </div>
      <div class="site-branding search-form-submit">
        <i class="iconfont js-toggle-search iconsearch icon-search"></i>
      </div>
    </div>
  </section>
  <div class="blank" style="padding-top: 75px;">
  </div>
  <div id="content" class="site-content">
    <div id="main">
      <header class="page-header">
        <h1 class="cat-title">
        标签云</h1>
        <span class="cat-des">
          <p>
            Tags 3</p>
        </span>
      </header>
      <div id="main-part">
     
          <div class="tag-cloud">
            <div class="tag-cloud-title">
            </div>
            <div class="tag-cloud-tags">
            <a href="/tags/hexo/" style="font-size: 30px; color: #09c">hexo</a> <a href="/tags/%E6%83%85%E4%B9%A6/" style="font-size: 15px; color: #f66">情书</a> <a href="/tags/%E9%9A%8F%E7%AC%94/" style="font-size: 15px; color: #f66">随笔</a>
            </div>
          </div>
        </div>
      
    </div>
  </div>
  
  
 <!-- ʵ�ֻ������� -->
  <div class="skin-menu no-select" id="mainskin" style="position: fixed">
 <div class="theme-controls row-container">
  <ul class="menu-list">
   <li id="white-bg"> <i class="fa fa-television" aria-hidden="true"></i></li>
   <li id="sakura-bg"> <i class="iconfont icon-sakura"></i></li>
   <li id="gribs-bg"> <i class="fa fa-slack" aria-hidden="true"></i></li>
   <li id="KAdots-bg"> <i class="iconfont icon-dots"></i></li>
   <li id="totem-bg"> <i class="fa fa-optin-monster" aria-hidden="true"></i></li>
   <li id="pixiv-bg"> <i class="iconfont icon-pixiv"></i></li>
   <li id="bing-bg"> <i class="iconfont icon-bing"></i></li>
   <li id="dark-bg"> <i class="fa fa-moon-o" aria-hidden="true"></i></li>
  </ul>
 </div>
</div>
<canvas id="night-mode-cover"></canvas>
 
  <div class="changeSkin-gear no-select">
  <div class="keys" id="setbtn"> 
   <span id="open-skinMenu"> 切换主题 | SCHEME TOOL  
     <i class="iconfont icon-gear inline-block rotating"></i> 
   </span>
  </div>
</div>

  <div id="mo-nav" class="">
  <div class="m-avatar">
    <img src="https://cdn.jsdelivr.net/gh/xiaomengxin123/cdn@1.3/img/custom/avatar.jpg">
  </div>
  <p style="text-align: center; color: #333; font-weight: 900; font-family: 'Ubuntu', sans-serif; letter-spacing: 1.5px">hz❤nxy我们の小栈</p>
  <p style="text-align: center; word-spacing: 20px;">
    
      
        <a href="https://github.com/xiaomengxin123" class="fa fa-github" target="_blank" style="color: #333; margin-left:20px"></a>
      
        <a href="http://weibo.com/" class="fa fa-weibo" target="_blank" style="color: #dd4b39; margin-left:20px"></a>
      
        <a href="https://im.qq.com/news/" class="fa fa-qq" target="_blank" style="color: #25c6fe; margin-left:20px"></a>
      
    
  </p>
  <ul id="menu-new-1" class="menu">
    
      <li>
        <a href="/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-fort-awesome faa-shake" aria-hidden="true"></i>
            首页
          </span>
        </a>
        
      </li>
    
      <li>
        <a href="/archives">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-archive faa-shake" aria-hidden="true"></i>
            归档
          </span>
        </a>
        
          <ul class="sub-menu">
            
              <li>
                <a href="/tags">
                  <i class="fa fa-tags" aria-hidden="true"></i>
                  标签
                </a>
              </li>
            
              <li>
                <a href="/categories/%E6%8A%80%E6%9C%AF/">
                  <i class="fa fa-code" aria-hidden="true"></i>
                  技术
                </a>
              </li>
            
              <li>
                <a href="/categories/%E7%94%9F%E6%B4%BB/">
                  <i class="fa fa-file-text-o" aria-hidden="true"></i>
                  生活
                </a>
              </li>
            
          </ul>
        
      </li>
    
      <li>
        <a href="javascript:;">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-list-ul faa-vertical" aria-hidden="true"></i>
            清单
          </span>
        </a>
        
          <ul class="sub-menu">
            
              <li>
                <a href="/tags/%E6%82%A6%E8%AF%BB/">
                  <i class="fa fa-th-list faa-bounce" aria-hidden="true"></i>
                  书单
                </a>
              </li>
            
              <li>
                <a href="/bangumi/">
                  <i class="fa fa-film faa-vertical" aria-hidden="true"></i>
                  番组
                </a>
              </li>
            
              <li>
                <a href="/music/">
                  <i class="fa fa-headphones" aria-hidden="true"></i>
                  歌单
                </a>
              </li>
            
              <li>
                <a href="/tags/%E7%9B%B8%E5%86%8C/">
                  <i class="fa fa-photo" aria-hidden="true"></i>
                  相册
                </a>
              </li>
            
              <li>
                <a href="/shuoshuo/">
                  <i class="fa fa-commenting-o fa-commenting" aria-hidden="true"></i>
                  说说
                </a>
              </li>
            
          </ul>
        
      </li>
    
      <li>
        <a href="/comment/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-pencil-square-o faa-tada" aria-hidden="true"></i>
            留言板
          </span>
        </a>
        
      </li>
    
      <li>
        <a href="/links/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-link faa-shake" aria-hidden="true"></i>
            友人帐
          </span>
        </a>
        
      </li>
    
      <li>
        <a href="/donate/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-heart faa-pulse" aria-hidden="true"></i>
            赞赏
          </span>
        </a>
        
      </li>
    
      <li>
        <a href="/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-leaf faa-wrench" aria-hidden="true"></i>
            关于
          </span>
        </a>
        
          <ul class="sub-menu">
            
              <li>
                <a href="/about/">
                  <i class="fa fa-meetup" aria-hidden="true"></i>
                  我？
                </a>
              </li>
            
              <li>
                <a href="/theme-sakura/">
                  <i class="fa iconfont icon-sakura" aria-hidden="true"></i>
                  主题
                </a>
              </li>
            
              <li>
                <a href="/lab/">
                  <i class="fa fa-cogs" aria-hidden="true"></i>
                  Lab
                </a>
              </li>
            
          </ul>
        
      </li>
    
      <li>
        <a href="/client/">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-android faa-vertical" aria-hidden="true"></i>
            客户端
          </span>
        </a>
        
      </li>
    
      <li>
        <a href="/atom.xml">
          <span class="faa-parent animated-hover">
            <i class="fa  fa-rss faa-pulse" aria-hidden="true"></i>
            RSS
          </span>
        </a>
        
      </li>
    
  </ul>
  <p style="text-align: center; font-size: 13px; color: #b9b9b9;">&copy 2019 HuangDaXian</p>
</div>
<button onclick="topFunction()" class="mobile-cd-top" id="moblieGoTop" title="Go to top" style="display: none;"><i class="fa fa-chevron-up" aria-hidden="true"></i></button>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
<style>
  .aplayer .aplayer-lrc {
    height: 35px;
  }
  .aplayer .aplayer-lrc p{
    font-size: 16px;
    font-weight: 700;
    line-height: 18px !important;
  }
  .aplayer .aplayer-lrc p.aplayer-lrc-current{
    color: #FF1493;
  }
  .aplayer.aplayer-narrow .aplayer-body{
    left: -66px !important;
  }
  .aplayer.aplayer-fixed .aplayer-lrc {
    display: none;
  }
  .aplayer .aplayer-lrc.aplayer-lrc-hide {
      display:none !important;
  }
  .aplayer.aplayer-fixed .lrc-show {
    display: block;
    background: rgba(255, 255, 255, 0.8);
  }
</style>
<meting-js

    id="4911874349"

    server="netease"

    type="playlist"

    fixed="true"

    autoplay="true"

    loop="all"

    order="random"

    preload="auto"

    volume="0.7"

    mutex="true"

</meting-js>
<script>
  $(function(){
    $('body').on('click', '.aplayer', function(){
      if($('.aplayer-button').hasClass('aplayer-play')) {
        $('.aplayer-lrc').removeClass('lrc-show');
      } else {
        $('.aplayer-lrc').addClass('lrc-show');
      }
    })
  });
</script>
</body>
</html>
<!--������ʾ����-->
<script type="text/javascript" src="/js/click_show_text.js"></script>
<!--�̻�-->
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
<script type="text/javascript" src="/js/fireworks.js"></script>
<!-- weather -->
<script type="text/javascript">
  WIDGET = {FID: '4S4OvHmiGE'}
  </script>
  <script type="text/javascript" src="https://apip.weatherdt.com/float/static/js/r.js?v=1111"></script>
  